//导入Ajax
import {
    ajax,
    isObject
} from "./ajax.js"
//运用单例模式实例一个分类框**************
var TypeClass = (function () {
    var anew

    function ac() {
        if (anew) {
            return anew
        }
        anew = $('<div class="typeClass"></div>').appendTo($('.banner .main'))
        return anew
    }
    return ac
}())
//运用单例模式实例一个分类框**************

//获取分类框
var bigNav = document.getElementsByClassName('bigNav')[0]
//给分类框添加鼠标移入事件
bigNav.addEventListener('mouseenter', fTypeC, true)
//鼠标移入事件****************************************
function fTypeC(e) {
    //事件对象
    var e = e || window.event;
    //事件目标
    var target = e.target || e.srcElement;
    //当移入ul标签中执行
    if (target.nodeName == 'UL') {
        //调用ajax
        ajax({
            url: "./json/bigNav.json",
            dataType: "json",
            data: "",
            type: "get",
            cache: false,
            //调用成功执行函数
            success: function (data) {
                //遍历返回的json数据
                for (var key in data) {
                    //当鼠标移入的类名和数据的键名一致时执行
                    if (target.getAttribute("class") == key) {
                        //声明一个空字符串
                        var str = ""
                        //遍历鼠标移入的类名和数据的键名一致的对象
                        for (var attr in data[key]) {
                            str += `<div><i>${attr}</i><b>&gt;</b><p>`
                            //遍历鼠标移入的类名和数据的键名一致的对象的值
                            for (var i = 0; i < data[key][attr].length; i++) {
                                //当数据为最后一个span时执行
                                if (i == data[key][attr].length - 1) {
                                    str += `<span><a href="./search.html?way=bookclass&bclass=smaNav-${escape(data[key][attr][i])}">${data[key][attr][i]}</a></span>`
                                } else {
                                    //当数据不为最后一个span时执行
                                    str += `<span><a href="./search.html?way=bookclass&bclass=smaNav-${escape(data[key][attr][i])}">${data[key][attr][i]}</a></span><span>|</span>`
                                }

                            }
                            str += `</p></div>`
                        }
                        //将数据添加到实例中
                        TypeClass()[0].innerHTML = str
                        TypeClass()[0].style.display = "block";
                        return
                    }
                }
            },
            error: function (x) {
                alert(x)
            }
        })
    }
}
//鼠标移入事件****************************************

//获取大图下的main,并添加鼠标移出事件
$(".banner .main").on("mouseleave", function () {
    TypeClass()[0].style.display = "none";
})
//获取大图下的main,并添加鼠标移出事件


//获取5选1下的div，并添加鼠标移入事件
$(".show5to1 .main div").on("mouseenter", function () {
    //将5选1下的全部div的class取消
    for (var i = 0; i < $(".show5to1 .main div").length; i++) {
        $(".show5to1 .main div")[i].className = ""
    }
    //将移入的div的class改变
    this.className = "showShow"
})
//获取5选1下的div，并添加鼠标移入事件

//秒杀计时器***************
setInterval(function () {
    //获取当前时间
    var startTime = new Date()
    var now1 = new Date().getTime() + (1000 * 60 * 60 * 24)
    // 获取结束时间
    var endTime = new Date(now1)
    var now2 = new Date(endTime.getFullYear() + "-" + (endTime.getMonth() + 1) + "-" + endTime.getDate() + " 00:00:00")
    //获取两个时间的时间差
    var timeCut = now2 - startTime
    //剩余小时
    var hours = parseInt(timeCut / (1000 * 60 * 60))
    //剩余分钟
    var minute = parseInt((timeCut % (1000 * 60 * 60)) / (1000 * 60))
    //剩余秒
    var second = parseInt((timeCut % (1000 * 60 * 60) % (1000 * 60)) / 1000)
    // 获取显示时间的框,并赋值
    // 判断当前时间是否为个位数
    if ((hours + "").length == 1) {
        hours = "0" + hours
    }
    if ((minute + "").length == 1) {
        minute = "0" + minute
    }
    if ((second + "").length == 1) {
        second = "0" + second
    }
    $(".seckill .seckill-Time span")[0].innerHTML = hours
    $(".seckill .seckill-Time span")[1].innerHTML = minute
    $(".seckill .seckill-Time span")[2].innerHTML = second
}, 1000)
//秒杀计时器***************

//调用ajax渲染秒杀区的数据*************************************
ajax({
    url: "./php/search.php",
    dataType: "json",
    data: {ways:"all"},
    type: "get",
    cache: false,
    //调用成功执行函数
    success: function (data) {
        for (var i=0;i<9;i++) {
            // 获取秒杀区并添加子节点
            $(".seckill .main").append(`
                <div class="seckill-main">
                <a href="./detail.html?bname=${escape(data[i]['id'])}">
                    <img src=${data[i]["url"]} alt="">
                    <p>${data[i]['goodsname']}</p>
                    <div class="sec-price">
                        <div class="seckill-p">
                            秒杀价: ${data[i]["price2"]}
                        </div>
                        <div class="seckill-n">
                            ${data[i]["price1"]}
                        </div>
                    </div>
                </a>
                </div>
                `)
        }
    },
    error: function (x) {
        alert(x)
    }
})
//调用ajax渲染秒杀区的数据*************************************

//找到每日精选下的ul，并绑定鼠标移入事件
//初始化每日精选**************************
function rightStart() {
    ajax({
        url: "./json/bigNav.json",
        dataType: "json",
        data: '',
        type: "get",
        cache: false,
        //调用成功执行函数
        success: function (data) {
            $(".daydaysel .main .dayshow")[0].innerHTML = ''
                    //声明一个空字符串
                    var str = ""
                    //遍历鼠标移入的类和数据的键名一致的对象,并添加到字符串中
                    for (var attr in data['bigNav1']) {
                        str += `<a href="#">${attr}</a>`
                    }
                    //将数据添加到实例中
                    $(".daydaysel .daytabs")[0].innerHTML = str

        },
        error: function (x) {
            alert(x)
        }
    })
    ajax({
        url: "./php/search.php",
        dataType: "json",
        data: {ways:"all"},
        type: "get",
        cache: false,
        //调用成功执行函数
        success: function (data) {
            $(".daydaysel .main .dayshow")[0].innerHTML = ''
                    for (var i=0;i<10;i++) {
                        // 获取每日展示并添加子节点
                        $(".daydaysel .main .dayshow").append(`
                        <div class="daytabs-main-box">
                        <div class="daytabs-main">
                        <a href="./detail.html?bname=${escape(data[i]['id'])}">
                            <img src=${data[i]["url"]} alt="">
                        </a>
                        <a href="./detail.html?bname=${escape(data[i]['id'])}">
                            <p class="bookname">${data[i]['goodsname']}</p>
                        </a>
                            <p class="author">${data[i]['shop']}</p>
                            <div class="daytabs-price">
                                <span class="daytabs-p">
                                ${data[i]["price1"]}
                                </span>
                                <span class="daytabs-n">
                                ${data[i]["price2"]}
                                </span>
                            </div>
                        </div>
                    </div>
                            `)
                    }
        },
        error: function (x) {
            alert(x)
        }
    })
}
rightStart()
//初始化每日精选**************************
$(".daydaysel .daydaytab ul")[0].addEventListener("mouseenter", daydaysel, true)

function daydaysel(e) {
    //事件对象
    var e = e || window.event;
    //事件目标
    var target = e.target || e.srcElement;
    //当移入li标签中执行
    if (target.nodeName == 'LI') {
        //将所有的li的class取消
        for (var i = 0; i < $(".daydaysel .daydaytab ul li").length; i++) {
            $(".daydaysel .daydaytab ul li")[i].className = ""
        }
        //将目标的class变为dayLi
        target.className = "dayLi"
        //获取选择的分类
        var tarClass = target.getAttribute("bclass");
        ajax({
            url: "./json/bigNav.json",
            dataType: "json",
            data: '',
            type: "get",
            cache: false,
            //调用成功执行函数
            success: function (data) {
                $(".daydaysel .main .dayshow")[0].innerHTML = ''
                        //声明一个空字符串
                        var str = ""
                        //遍历鼠标移入的类和数据的键名一致的对象,并添加到字符串中
                        for (var key in data){
                        if (tarClass == key) {
                            for (var attr in data[key]) {
                                str += `<a href="#">${attr}</a>`
                            }
                        }
                    }
                        //将数据添加到实例中
                        $(".daydaysel .daytabs")[0].innerHTML = str
    
            },
            error: function (x) {
                alert(x)
            }
        })
        //调用ajax*************************
        ajax({
            url: "./php/search.php",
            dataType: "json",
            data: {ways:tarClass},
            type: "get",
            cache: false,
            //调用成功执行函数
            success: function (data) {
                $(".daydaysel .main .dayshow")[0].innerHTML = ''
                //遍历返回的json数据
                    for (var i=0;i<10;i++) {
                        // 获取每日展示并添加子节点
                        $(".daydaysel .main .dayshow").append(`
                        <div class="daytabs-main-box">
                        <div class="daytabs-main">
                        <a href="./detail.html?bname=${escape(data[i]['id'])}">
                            <img src=${data[i]["url"]} alt="">
                        </a>
                        <a href="./detail.html?bname=${escape(data[i]['id'])}">
                            <p class="bookname">${data[i]['goodsname']}</p>
                        </a>
                            <p class="author">${data[i]['shop']}</p>
                            <div class="daytabs-price">
                                <span class="daytabs-p">
                                ${data[i]["price1"]}
                                </span>
                                <span class="daytabs-n">
                                ${data[i]["price2"]}
                                </span>
                            </div>
                        </div>
                    </div>
                            `)
                    }
            },
            error: function (x) {
                alert(x)
            }
        })
        //调用ajax*************************
    }
}
//找到每日精选下的ul，并绑定鼠标移入事件
//调用ajax渲染秒杀区的数据*************************************

 

    //轮播图
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true, // 循环模式选项
        speed:1000,
        autoplay: {
            delay: 5000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
            },
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        }
        
      }) 
//给回到顶部添加点击事件
$(".totop").on("click", function () {
    document.documentElement.scrollTop = 0
})
window.addEventListener("scroll", function () {

    if (document.documentElement.scrollTop >= 300) {
        $(".totop")[0].style.display = "block"
    } else {
        $(".totop")[0].style.display = "none"
    }
})

$('.daydaysel .daytabs').on("click",function(e){
    //事件对象
    var e = e || window.event;
    //事件目标
    var target = e.target || e.srcElement;
    var tarClass = target.innerHTML
    if(target.nodeName=='A'){
        ajax({
            url: "./php/search.php",
            dataType: "json",
            data: {ways:'midNav',mid:tarClass},
            type: "get",
            cache: false,
            //调用成功执行函数
            success: function (data) {
                $(".daydaysel .main .dayshow")[0].innerHTML = ''
                //遍历返回的json数据
                    for (var i=0;i<10;i++) {
                        // 获取每日展示并添加子节点
                        $(".daydaysel .main .dayshow").append(`
                        <div class="daytabs-main-box">
                        <div class="daytabs-main">
                        <a href="./detail.html?bname=${escape(data[i]['id'])}">
                            <img src=${data[i]["url"]} alt="">
                        </a>
                        <a href="./detail.html?bname=${escape(data[i]['id'])}">
                            <p class="bookname">${data[i]['goodsname']}</p>
                        </a>
                            <p class="author">${data[i]['shop']}</p>
                            <div class="daytabs-price">
                                <span class="daytabs-p">
                                ${data[i]["price1"]}
                                </span>
                                <span class="daytabs-n">
                                ${data[i]["price2"]}
                                </span>
                            </div>
                        </div>
                    </div>
                            `)
                    }
            },
            error: function (x) {
                alert(x)
            }
        })
        return false
    }

})